<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HashRouter 的实现原理</title>
  <style>
    #result{
      width: 400px;
      height: 300px;
      border:solid 1px #ddd;
    }
  </style>
</head>
<body>
  <a href="#/home">Home</a>
  <a href="#/about">About</a>

  <hr>
  <div id="result">

  </div>

  <script>
    //获取 result 元素
    let result = document.getElementById('result');

    // 『hashchange』  全局的一个事件, 触发时机: 当页面 URL 的 hash 值(锚点)发生变化的时候.
    window.addEventListener('hashchange', function() {
      //获取页面 URL 的 hash 值
      let hash = location.hash;
      //判断
      switch(hash){
        case '#/home':
          //显示 Home Home Home   <Route path="/home" element={<Home />} />
          result.innerHTML = 'Home Home Home'; // router 内部会进行 『组件渲染』
          break;
        case '#/about':
          //显示 About About About
          result.innerHTML = 'About About About'
          break;
        default:
          result.innerHTML = '404 Not Found';
          break;
      }
    });

  </script>
</body>
</html>